<script setup>
// import { addNLApi, deleteAllNLApi, getNLByIdApi, getNLPageApi, updateNLApi } from '@/api/nusringLevel'
import { addNLApi, deleteAllNLApi, getNLByIdApi, getNLPageApi, updateNLApi } from '@/api/nursingLevel'
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus';



const ids = ref([])
const form = ref({
    name: '',
    lplanId: '',
    fee: '',
    description: '',
    status: 1,
})
const nursingLevelRef = ref(null)
const title = ref('')
const open = ref(false)
const NLList = ref([])
const page = ref(1)
const pageSize = ref(10)
const totalSize = ref(0)
const searchForm = ref({
    name: '',
})




const handleDelete = async (row) => {
    ids.value = row.id
    handleDeletes()
}
const handleDeletes = async () => {
    const result = await deleteAllNLApi(ids.value)
    if (result.code === 1) {
        ElMessage.success('删除成功')
        getPage()
    } else {
        ElMessage.error('删除失败')
    }
}

const handleSelectionChange = (selection) => {
    ids.value = selection.map(item => item.id)
}
const handleUpdate = async (row) => {
    title.value = '修改护理等级'
    open.value = true
    const result = await getNLByIdApi(row.id)
    form.value = result.data
}
const cancel = () => {
    open.value = false
    reset()
}
const submitForm = async () => {
    if (!nursingLevelRef) return
    await nursingLevelRef.value.validate(async (valid, fields) => {
        if (valid) {
            let result = null;
            if (form.value.id) {
                result = await updateNLApi(form.value)
            } else {
                result = await addNLApi(form.value)
            }
            if (result.code === 1) {
                ElMessage.success('操作成功')
                open.value = false
                reset()
                getPage()
            } else {
                ElMessage.error('操作失败')
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const rules = ref({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' }
    ]
})
const handleAdd = () => {
    title.value = '添加护理等级'
    reset()
    open.value = true
}

const reset = () => {
    form.value.name = ''
    form.value.lplanId = ''
    form.value.fee = ''
    form.value.description = ''
    form.value.status = 1
}
const resetSearchForm = () => {
    page.value = 1
    pageSize.value = 10
    searchForm.value = {
        name: '',
    }
    getPage()
}
const getPage = async () => {
    const result = await getNLPageApi(page.value, pageSize.value, searchForm.value.name)
    NLList.value = result.data.rows
    totalSize.value = result.data.total
}
const handleSizeChange = (val) => {
    pageSize.value = val
    page.value = 1
    getPage()
}
const handleCurrentChange = (val) => {
    page.value = val
    getPage()
}

onMounted(() => {
    getPage()
})
</script>

<template>

    <!-- 添加或修改护理项目对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
        <el-form ref="nursingLevelRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="护理计划ID" prop="lplanId">
                <el-input v-model="form.lplanId" placeholder="请输入护理计划ID" />
            </el-form-item>
            <el-form-item label="护理费用" prop="fee">
                <el-input v-model="form.fee" placeholder="请输入护理费用" />
            </el-form-item>
            <el-form-item label="等级说明" prop="description">
                <el-input v-model="form.description" placeholder="请输入等级说明" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>

    <el-form :inline="true" :model="searchForm">
        <el-form-item label="等级名称">
            <el-input v-model="searchForm.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getPage">查询</el-button>
            <el-button @click="resetSearchForm">重置</el-button>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <el-button type="danger" :disabled="multiple" @click="handleDeletes">删除</el-button>

    <el-table :data="NLList" @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column type="selection" />
        <el-table-column type="index" label="序号" width="100px" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="lplanId" label="护理计划ID" />
        <el-table-column prop="fee" label="护理费用" />
        <el-table-column prop="status" label="状态">
            <template #default="scope">
                <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
                <el-tag v-else type="danger">禁用</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="description" label="等级说明" />
        <el-table-column label="操作" width="200px">
            <template #default="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />


</template>